import 'package:core_package/ui/widget/my_asset_image.dart';
import 'package:flutter/material.dart';
import 'package:core_package/core_package.dart';
import 'package:flutter_app_unionad/core/configuration.dart';
import 'package:flutter_app_unionad/model/device_info_model.dart';
import 'package:flutter_app_unionad/model/user_device_list_model.dart';
import 'package:flutter_app_unionad/ui/basice/custom_circular_progress_indicator.dart';
import 'package:flutter_app_unionad/ui/my_facility/cut_device_page.dart';

class MyFacilityWidget extends StatelessWidget {
  final bool isAwait;
  final Function()? rechargeOnTop;
  final Function()? rechargeOrderOnTop;
  final Function()? reloadOnTop;

  final DeviceInfoModel? infoModel;
  final UserDeviceListModel? userDeviceListModel;

  const MyFacilityWidget({
    Key? key,
    this.isAwait = true,
    this.rechargeOnTop,
    this.rechargeOrderOnTop,
    this.infoModel,
    this.reloadOnTop,
    this.userDeviceListModel,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          buildTopContent(context),
          MySizeBox(height: 5),
          buildBottomWidget(),
        ],
      ),
    );
  }

  Widget buildTopContent(BuildContext context) {
    return Container(
      height: 443.px,
      width: double.infinity,
      child: Stack(
        children: [
          Positioned(
              left: 0,
              top: 0,
              right: 0,
              child: MyAssetImage(
                "icon_ficility_bg_2.png",
                height: 403.px,
                width: 375.px,
              )),
          !isAwait
              ? Positioned(
                  top: 140.px,
                  left: 61.px,
                  child: MyAssetImage(
                    "icon_ficility_time",
                    width: 253.px,
                    height: 155.px,
                  ))
              : Container(),
          !isAwait
              ? Positioned(
                  child: Column(
                  children: [
                    MySizeBox(height: 65.px, width: double.infinity),
                    Text(
                      "汼汼生活",
                      style: TextStyle(
                        color: MyColors.formHex("#FFFFFFFF"),
                        fontSize: MyFont.font12,
                        fontWeight: MyFontWeight.regular,
                      ),
                    ),
                    MySizeBox(height: 10),
                    Text(
                      "设备号：${infoModel != null ? infoModel!.id ?? "" : ""}",
                      style: TextStyle(
                        color: MyColors.formHex("#FFFFFFFF"),
                        fontSize: MyFont.font16,
                        fontWeight: MyFontWeight.bold,
                      ),
                    ),
                    MySizeBox(height: 116.px),
                    Text(
                      infoModel == null
                          ? "0"
                          : (infoModel!.devAccount == null
                              ? "0"
                              : infoModel!.devAccount!.accountAmount == null
                                  ? "0"
                                  : infoModel!.devAccount!.accountAmount.toString()),
                      style: TextStyle(
                        color: MyColors.formHex("#1D242CFF"),
                        fontSize: 50.px,
                        fontWeight: MyFontWeight.bold,
                        height: 1.px,
                      ),
                    ),
                    Text(
                      // infoModel != null
                      //     ? ((infoModel.userType == '03' || infoModel.userType == '04') ? "剩余流量" : "剩余天数")
                      //     :
                      "剩余天数",
                      style: TextStyle(
                        color: MyColors.formHex("#1D242CFF"),
                        fontSize: MyFont.font11,
                        fontWeight: MyFontWeight.regular,
                      ),
                    ),
                  ],
                ))
              : Container(),
          !isAwait
              ? Container()
              : Positioned(
                  left: 0,
                  right: 0,
                  top: 81.px,
                  child: buildAwaitInstall(),
                ),
          Positioned(
            child: buildCenter(),
            bottom: 0,
            left: 10.px,
            right: 10.px,
          ),
          if (userDeviceListModel != null &&
              userDeviceListModel!.devList != null &&
              userDeviceListModel!.devList!.length > 1)
            Positioned(
              top: 62.px,
              right: 20.px,
              child: GestureDetector(
                onTap: () {
                  NavigatorUtil.push(
                    context,
                    CutDevicePage.routeName,
                    arguments: userDeviceListModel!.devList!.map((e) => e.devId).toList(),
                  ).then((value) {
                    if (value != null && reloadOnTop != null) {
                      UserCacheUil.setString(Configuration.deviceId, value);

                      print(UserCacheUil.getString(Configuration.deviceId));
                      reloadOnTop?.call();
                    }
                  });
                },
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      "切换设备",
                      style: TextStyle(
                        color: MyColors.formHex("#FFFFFFFF"),
                        fontSize: MyFont.font14,
                        fontWeight: MyFontWeight.bold,
                      ),
                    ),
                    Icon(
                      Icons.swap_horiz,
                      size: 16.px,
                      color: Colors.white,
                    ),
                  ],
                ),
              ),
            )
        ],
      ),
    );
  }

  Widget buildCenter() {
    return Container(
      height: 110.px,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(5.px),
      ),
      child: Row(
        children: [
          buildCenterContent(infoModel != null ? infoModel!.oriTds.toString() : "117", "TDS 原水"),
          Container(color: MyColors.color_35_35_35, width: 1.px, height: 36.px),
          buildCenterContent(infoModel != null ? infoModel!.cleanTds.toString() : "8", "TDS 净水"),
        ],
      ),
    );
  }

  Widget buildCenterContent(String title, String detail) {
    return Container(
      alignment: Alignment.center,
      width: SizeFill.screenWidth! / 2 - 21.px / 2,
      // color: Colors.red,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            title,
            style: TextStyle(
              color: MyColors.formHex("#1D242CFF"),
              fontWeight: MyFontWeight.bold,
              fontSize: MyFont.font24,
            ),
          ),
          Text(
            detail,
            style: TextStyle(
              color: MyColors.formHex("#1D242CFF"),
              fontWeight: MyFontWeight.regular,
              fontSize: MyFont.font12,
            ),
          )
        ],
      ),
    );
  }

  Widget buildBottomWidget() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 10.px),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5.px),
        color: Colors.white,
      ),
      width: double.infinity,
      // width: double.infinity,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20.px, vertical: 35.px),
        child: buildBottomContent(),
      ),
    );
  }

  Widget buildBottomContent() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            buildProgressWidget(MyColors.formHex('#66AF32FF'), "颗粒活性炭",
                value: infoModel == null ? 95 : infoModel!.firstBfb),
            buildProgressWidget(MyColors.formHex('#F8BA35FF'), "RO膜",
                value: infoModel != null ? infoModel!.secondBfb : 72),
            buildProgressWidget(MyColors.formHex('#F8BA35FF'), "1微米PP棉",
                value: infoModel != null ? infoModel!.thirdBfb : 80),
          ],
        ),
        MySizeBox(height: 25.px),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            buildProgressWidget(MyColors.formHex('#F8BA35FF'), "压缩碳滤芯",
                value: infoModel != null ? infoModel!.fouthBfb : 28),
            buildProgressWidget(MyColors.formHex('#F8BA35FF'), "5微米PP棉",
                value: infoModel != null ? infoModel!.fifthBfb : 65),
          ],
        ),
        MySizeBox(
          height: 30.px,
        ),
        Offstage(
          child: buildBottomButton(),
          offstage: isAwait,
        ),
      ],
    );
  }

  Widget buildBottomButton() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        buildButton("充值", () {
          if (rechargeOnTop != null) rechargeOnTop?.call();
        }),
        buildButton("充值记录", () {
          if (rechargeOrderOnTop != null) rechargeOrderOnTop?.call();
        }),
      ],
    );
  }

  Widget buildButton(String title, Function() onTop) {
    return GestureDetector(
      onTap: () {
        onTop();
      },
      child: Container(
        width: 120.px,
        height: 40.px,
        decoration: BoxDecoration(
          color: MyColors.color_245_174_41,
          borderRadius: BorderRadius.circular(2.px),
        ),
        alignment: Alignment.center,
        child: Text(
          title,
          style: TextStyle(
            color: Colors.white,
            fontWeight: MyFontWeight.bold,
            fontSize: MyFont.font14,
          ),
        ),
      ),
    );
  }

  Widget buildProgressWidget(Color color, String title, {num? value}) {
    //
    //
    if (value == null) value = 0;
    Color progressColor = value > 10 ? MyColors.formHex('#66AF32FF') : MyColors.formHex('#F8BA35FF');
    return Column(
      children: [
        Container(
          width: 38.px,
          height: 38.px,
          child: Stack(
            children: [
              Positioned.fill(
                child: Container(
                  alignment: Alignment.center,
                  child: CustomCircularProgressIndicator(
                    radius: 18.px,
                    colors: [progressColor, progressColor],
                    value: value / 100.0,
                    stokeWidth: 2.5.px,
                  ),
                ),
              ),
              Positioned.fill(
                child: Container(
                  alignment: Alignment.center,
                  child: Text.rich(
                    TextSpan(
                      children: [
                        TextSpan(
                          text: (value).toStringAsFixed(0),
                          style: TextStyle(
                            color: progressColor,
                            fontSize: MyFont.font16,
                          ),
                        ),
                        TextSpan(
                          text: "%",
                          style: TextStyle(
                            color: progressColor,
                            fontSize: 5.px,
                          ),
                        ),
                      ],
                    ),
                    textAlign: TextAlign.end,
                  ),
                ),
              )
            ],
          ),
        ),
        MySizeBox(height: 5),
        Text(
          title,
          style: TextStyle(
            color: MyColors.formHex("#272727FF"),
            fontSize: MyFont.font10,
            fontWeight: MyFontWeight.regular,
          ),
        ),
      ],
    );
  }

  //等待安装的页面

  Widget buildAwaitInstall() {
    return Column(
      children: [
        Text(
          "汼汼生活开始为您开启健康安全饮用水",
          style: TextStyle(
            color: Colors.white,
            fontWeight: MyFontWeight.regular,
            fontSize: MyFont.font13,
          ),
        ),
        MySizeBox(height: 25),
        MyAssetImage(
          "icon_time",
          width: 28.px,
          height: 28.px,
        ),
        MySizeBox(height: 20),
        Text(
          "已预约安装\n安装师傅正在赶来...",
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            fontWeight: MyFontWeight.bold,
            fontSize: MyFont.font20,
          ),
        ),
        MySizeBox(height: 20),
        Container(
          width: 241.px,
          height: 71.px,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(
                MyAssetsImages.setAssetsImagesPath("icon_bg_1"),
              ),
            ),
          ),
          alignment: Alignment.center,
          child: Text(
            "提前 完成每日任务，免费获取天数或\n提现到银行账户，绑定设备联系我们\n${Configuration().phone}",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontWeight: MyFontWeight.regular,
              fontSize: MyFont.font11,
            ),
          ),
        )
      ],
    );
  }
}
